<template>
  将文件转成base64上传
  <el-upload
  class="upload-demo"
  drag
  action
  :auto-upload="false"
  :show-file-list="false"
  :on-change="changeFile"
  enctype="multipart/form-data" 
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  <img :src="img" alt="">
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import axios from 'axios'
import qs from 'qs'
import {fileParse} from '../utils/index'
/* 
6、文件断点续传
  文件上传有两套方案
    1、基于文件流(form-data)   // element-ui上传组件默认是基于文件流端
    2、客户端需要把文件化为base64

  默认上传
    格式：multipart/form-data
    数据格式：form-data
    file 文件流信息
    filename 文件名
  
  上传成功后获取服务器返回信息，通知on-success回调函数执行
*/

export default defineComponent({
  name: 'Upload2',
  setup() {
    const count = ref(0)
    return { count }
  },
  data() {
    return {
      img: null
    }
  },
  methods: {
  async changeFile(file: any) {
      if(!file) return
      file = file.raw

      // 格式校验
      /* 
        把上传的文件先进行解析（FileReader）
        把其转换base64编码格式
        自己基于axios把信息传递给服务器
      */
     // 转base64  或者 buffer
     let result = await fileParse(file, 'base64')
     result = await axios.post('/api/single2',qs.stringify({
       chunk: encodeURIComponent(result),
       filename: file.name
     }),
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
     )
     console.log(result.data)
    }
  }
})
</script>
